<template>
    <div class="sm-container">
        <el-row :gutter="12" type="flex" ref="elRow">
            <el-col >
                <div class="card">
                    <span class="label-vip">VIP</span>
                    <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/prod/upload/dfb72cf15e104eca947bc8022c022680.png?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate cu-text-blue">热血出征</h4>
                    <h5 class="text-truncate">坚决打赢疫情防控的阻击战</h5>
                </div>
            </el-col>
            <el-col >
                <div class="card">
                    <span class="label-exclusive">独播</span>
                    <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/prod/upload/5b9ca805ec85482eb477694afe9a76ec.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate cu-text-blue">王牌对王牌·智商飙升</h4>
                    <h5 class="text-truncate">沈腾贾玲超高默契截胡赵薇</h5>
                </div>
            </el-col>
            <el-col >
                <div class="card">
                    <span class="label-exclusive">独播</span>
                    <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/prod/upload/9d83e936d65047a28329dd320367b4ae.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate cu-text-blue">狄仁杰·大唐现毒蜘蛛</h4>
                    <h5 class="text-truncate">狄仁杰破海上千人血案</h5>
                </div>
            </el-col>
            <el-col >
                <div class="card">
                    <img class="card-img-top cu-hand" src="https://ykimg.alicdn.com/develop/image/2020-02-09/226b97ceadb9bd6a484c27e0550c9be6.png?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate cu-text-blue">上课啦❤线上开学季</h4>
                    <h5 class="text-truncate">全天直播不间断</h5>
                </div>
            </el-col>
            <el-col >
                <div class="card">
                    <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/prod/upload/ee3c497985a74c7e84aae1e937d6b816.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate cu-text-blue">秘境星球🔥动物世界</h4>
                    <h5 class="text-truncate">孩子在家也能长见识</h5>
                </div>
            </el-col>
            <el-col  class="md-hiden">
                <div class="card">
                    <span class="label-exclusive">独播</span>
                    <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate">宝宝巴士·成长故事</h4>
                    <h5 class="text-truncate">每集一个知识点</h5>
                </div>
            </el-col>
            <el-col  class="lg-hiden">
                <div class="card">
                    <span class="label-exclusive">独播</span>
                    <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/prod/upload/7c64842cda244da3997ac2cf7f227968.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate">乡村爱情12🔥危机</h4>
                    <h5 class="text-truncate">大个出手阔绰惹宋晓峰不满</h5>
                </div>
            </el-col>
            <el-col  class="xl-hiden">
                <div class="card">
                    <span class="label-exclusive">独播</span>
                    <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/prod/upload/b59503674cfc4e6ca75b595df4fbeef6.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                    <h4 class="text-truncate">花小厨💓林间烤肉</h4>
                    <h5 class="text-truncate">奇招！花小麦山间烤肉引山贼</h5>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "sm",
        data(){
            return{}
        },
        methods:{
            move(direction){


            }
        }
    }
</script>

<style scoped lang="scss">
    .sm-container{
        height: 210px;
        overflow: hidden;
        position: relative;
    }

    .el-row {
        margin-bottom: 20px;
        position: absolute;
        min-width: 100%;
        justify-content: space-between;
        &:last-child {
            margin-bottom: 0;
        }
        .card{
            border: none;
            background-color: rgba(0,0,0,0);
            overflow: hidden;
            .card-img-top:hover{
                transition: all 0.3s linear;
                transform: scale(1.08,1.08);
            }
            .label-vip,.label-exclusive{
                position: absolute;
                border-radius: 0 0 2px 2px;
                font-size: 12px;
                line-height: 150%;
                color: white;
                right: 5px;
                top: 5px;
                padding: 0 5px;
                user-select:none;
                z-index: 15;
            }
            .label-vip{
                background-color: #ebba73;
            }
            .label-exclusive{
                background-color: #fc4273;
            }
            h4{
                font-size: 18px;
                margin-top: 5px;
                margin-bottom: 5px;
                color: white;
            }
            h5{
                font-size: 13px;
                color: #99a9bf;
            }
        }
    }
    .el-col {
        border-radius: 4px;
        min-width: 192px;
    }

</style>